<template>
	<view>
		<!-- 顶部导航栏 -->
		<view v-if="showHeader" class="header" :style="{ position: headerPosition, top: headerTop, opacity: afterHeaderOpacity }">
			<!-- 搜索框 -->
			<view class="input-box">
				<input :placeholder="i18n.keyword" placeholder-style="color:#c0c0c0;" @tap="toSearch()" />
				<view class="icon search"></view>
			</view>
			<picker @change="languageChange" :range="languageArray">
				<!-- <view class="icon-btn">
					<view class="icon tongzhi"></view>
				</view> -->
				<view class="languageBtn">
					<view class="">{{ languageArray[languageIndex] }}</view>
					<uni-icons type="arrowdown" class="icons" color="#ff" size="12"></uni-icons>
				</view>
			</picker>
			<!-- 右侧图标按钮 -->
			<!-- <view class="icon-btn">
				<view class="icon tongzhi" @tap="toMsg"></view>
			</view> -->
		</view>

		<!-- 占位 -->
		<view v-if="showHeader" class="place"></view>
		<!-- 轮播图 -->
		<view class="swiper">
			<view class="swiper-box">
				<swiper circular="true" autoplay="true" @change="swiperChange">
					<swiper-item v-for="swiper in swiperList" :key="swiper.id">
						<image :src="swiper.imageFilePath" @tap="toSwiper(swiper)"></image>
					</swiper-item>
				</swiper>

				<view class="indicator">
					<view class="dots" v-for="(swiper, index) in swiperList" :class="[currentSwiper >= index ? 'on' : '']" :key="index"></view>
				</view>
			</view>
		</view>
		<!-- 每日上新 -->
		<view class="seckill-section">
			<view class="s-header" @click="navToUpDate">
				<view class="sort">{{ i18n.newEveryDay }}</view>
				<view class="more">
					{{ i18n.more }}
					<uni-icons type="arrowright" size="14" color="#666"></uni-icons>
				</view>
			</view>
			<scroll-view class="floor-list" scroll-x>
				<view class="scoll-wrapper">
					<view v-for="(good, index) in goodList" :key="index" class="floor-item" @click="navToDetailPage(good.id)">
						<image :src="good.mainImagePath" mode="aspectFill"></image>
						<text class=" clamp">
							<text class="title">{{ good.name }}</text>
						</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="seckill-section">
			<view class="s-header" @click="navToRank">
				<view class="sort">{{ i18n.bestSellers }}</view>
				<view class="more">
					{{ i18n.more }}
					<uni-icons type="arrowright" size="14" color="#666"></uni-icons>
				</view>
			</view>
			<scroll-view class="floor-list" scroll-x>
				<view class="scoll-wrapper">
					<view v-for="(rank, index) in rankList" :key="index" class="floor-item" @click="navToDetailPage(rank.id)">
						<image :src="rank.mainImagePath" mode="aspectFill"></image>
						<text class=" clamp">
							<text class="title">{{ rank.name }}</text>
						</text>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 秒杀楼层 -->
		<!-- <view class="seckill-section">
			<view class="s-header" @click="navToseckillPage(1)">
				<view class="sort">
					限时购
				</view>
				<text class="tip">8点场</text>
				<uni-countdown color="#FFFFFF" background-color="#f13342" :show-day="false" :hour="countdown.hour" :minute="countdown.minute"
				 :second="countdown.second" @timeup="seckillUpdata"></uni-countdown>
				<view class="more">
					{{ i18n.more }}
					<uni-icons type="arrowright" size="14" color="#666"></uni-icons>
				</view>
			</view>
			<scroll-view class="floor-list" scroll-x>
				<view class="scoll-wrapper">
					<view v-for="(item, index) in seckillList" :key="index" class="floor-item" @click="navToseckillPage(item)">
						<image :src="item.image" mode="aspectFill"></image>
						<view class="price">￥{{item.price}}
							<text class="oldPrice">¥{{item.oldPrice}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view> -->

		<!-- 广告图 -->
		<!-- <view class="banner">
			<image src="/static/img/banner.jpg"></image>
		</view> -->
			<view class="goods-list">
				<!-- tab列表 -->
				<scroll-view scroll-with-animation scroll-x class="topTabBar" :class="tabPosition ? 'fixed' : ''" @scroll="scrollMove"
				 :scroll-left="scrollLeft">
					<view class="innerBox">
						<view class="grid" :class="[tbIndex == tabbarIndex ? 'on' : '']" v-for="(item, tbIndex) in categoryList" :key="tbIndex"
						 :id="'ele' + tbIndex" @click.native="showType(tbIndex, item.id)">
							<view class="text">{{ item.name }}</view>
							<!-- <view class="cont">{{ item.name }}</view> -->
						</view>
					</view>
				</scroll-view>
				<view class="product-list">
					<view class="product" v-for="(product, index) in productList" :key="index" @click="navToDetailPage(product.id)">
						<view class="imgBox">
							<image mode="widthFix" :src="product.mainImagePath"></image>
							<view class="tagBox">
								<view class="tags">{{ product.productCategoryName }}</view>
							</view>
						</view>
						<view class="name">{{ product.name }}</view>
						<view class="info">
							<view class="price">{{ product.price }}{{ product.currencyTypeName }}</view>
						</view>
					</view>
				</view>
				<view class="loading-text">{{ loadingText }}</view>
			</view>
	</view>
</template>

<script>
	var ttt = 0;
	export default {
		computed: {
			i18n() {
				// 倒入你需要的对象
				return this.$t('home');
			}
		},
		data() {
			return {
				languageArray: ['中文', '英文', '波兰语', '俄语', '捷克语', '罗马尼亚语', '西班牙语', '匈牙利语', '越南语'],
				showHeader: true,
				afterHeaderOpacity: 1, //不透明度
				headerPosition: 'fixed',
				headerTop: null,
				statusTop: null,
				nVueTitle: null,
				indexList: [],
				goodList: [],
				rankList: [],
				categoryList: [],
				tabHeight: '',
				tabPosition: '',
				scrollLeft: '',
				moveParams: {
					scrollLeft: 0, // scroll-view滚动的距离,默认为0,因为没有触发滚动
					subLeft: '', //点击元素距离屏幕左边的距离
					subHalfWidth: '', //点击元素的宽度一半
					screenHalfWidth: '' //屏幕宽度的一半
				},
				currentSwiper: 0,
				// 轮播图片
				swiperList: [],
				// 秒杀
				seckillList: [{
						image: '/static/img/goods/p1.jpg',
						title: '古黛妃 短袖t恤女夏装2019新款韩版宽松',
						price: 179,
						oldPrice: 200,
						sales: 61
					},
					{
						image: '/static/img/goods/p2.jpg',
						title: '潘歌针织连衣裙',
						price: 78,
						oldPrice: 100,
						sales: 16
					},
					{
						image: '/static/img/goods/p3.jpg',
						title: '潘歌针织连衣裙',
						price: 78,
						oldPrice: 100,
						sales: 16
					},
					{
						image: '/static/img/goods/p4.jpg',
						title: '巧谷2019春夏季新品新款女装',
						price: 108.8,
						oldPrice: 150,
						sales: 5
					},
					{
						image: '/static/img/goods/p5.jpg',
						title: '巧谷2019春夏季新品新款女装',
						price: 108.8,
						oldPrice: 150,
						sales: 5
					}
				],
				countdown: {
					hour: 0,
					minute: 0,
					second: 60
				},
				tabType: [{
						title: '推荐',
						cont: '猜你喜欢'
					},
					{
						title: '米粉节',
						cont: '超值必抢'
					},
					{
						title: '智能',
						cont: '未来已来'
					},
					{
						title: '电器',
						cont: '重塑生活'
					},
					{
						title: '生活',
						cont: '品质生活'
					},
					{
						title: '时尚',
						cont: '美妆搭配'
					},
					{
						title: '特惠',
						cont: '特惠专区'
					}
				],
				tabbarIndex: 0,
				languageIndex:0,
				//猜你喜欢列表
				productList: [],
				loadingText: '正在加载...',
				microShopId: ''
			};
		},
		onPageScroll(e) {
			//兼容iOS端下拉时顶部漂移
			this.headerPosition = e.scrollTop >= 0 ? 'fixed' : 'absolute';
			this.headerTop = e.scrollTop >= 0 ? null : 0;
			this.statusTop = e.scrollTop >= 0 ? null : -this.statusHeight + 'px';
			// 判断tab分类位置
			this.tabPosition = e.scrollTop >= this.tabHeight - 50 ? true : false;
			// console.log('e.scrollTop',e.scrollTop)
			// console.log('判断',this.tabPosition)
		},
		//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
		onPullDownRefresh() {
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		//上拉加载，需要自己在page.json文件中配置"onReachBottomDistance"
		onReachBottom() {
			uni.showToast({
				title: '触发上拉加载'
			});
			let len = this.productList.length;
			if (len >= 40) {
				this.loadingText = '到底了';
				return false;
			}
			// 演示,随机加入商品,生成环境请替换为ajax请求
			// let end_goods_id = this.productList[len - 1].goods_id;
			// for (let i = 1; i <= 10; i++) {
			// 	let goods_id = end_goods_id + i;
			// 	let p = {
			// 		goods_id: goods_id,
			// 		img: '/static/img/goods/p' + (goods_id % 10 == 0 ? 10 : goods_id % 10) + '.jpg',
			// 		name: '商品名称商品名称商品名称商品名称商品名称',
			// 		price: '￥168',
			// 		slogan: '1235人付款'
			// 	};
			// 	this.productList.push(p);
			// }
		},
		onLoad(option) {
			const microShopId = uni.getStorageSync('microShopId');
			if (microShopId) {
				this.microShopId = microShopId;
				console.log(microShopId);
			}

			// #ifdef APP-PLUS
			this.nVueTitle = uni.getSubNVueById('homeTitleNvue');
			this.nVueTitle.onMessage(res => {
				let type = res.data.type;
				if (type == 'focus') {
					this.toSearch();
				}
			});
			this.showHeader = false;
			this.statusHeight = plus.navigator.getStatusbarHeight();
			// #endif

			this.getIndexList();

		},
		onReady() {
			// 获取tab距顶部高度
			this.getTabHeight();
			// 获取屏幕宽度
			this.getScreenWidth();
			// this.setEN()
		},
		methods: {
			getIndexList() {
				uni.request({
					url: 'http://121.40.82.3:52019/v1/template001/home/homePage', //仅为示例，并非真实接口地址。
					data: {
						// microShopId: 'c0a8007c-6e48-18b9-816e-48d04d870053',
						microShopId: this.microShopId
					},
					method: 'GET',
					dataType: 'json',
					header: {
						'content-type': 'application/json ' //自定义请求头信息
					},
					success: res => {
						console.log(res.data.data);
						this.indexList = res.data.data;
						this.goodList = res.data.data.dailyNewGood.list;
						this.rankList = res.data.data.hotRank.list;
						this.categoryList = res.data.data.HOME_TUIJIAN;

						this.swiperList = res.data.data.HOEM_LUNBOTU;
						console.log(res.data.data.HOME_TUIJIAN[0].id);
						this.getListByCategory(res.data.data.HOME_TUIJIAN[0].id);
					}
				});
			},
			getListByCategory(id) {
				uni.request({
					url: 'http://121.40.82.3:52019/v1/template001/home/columnDetail', //仅为示例，并非真实接口地址。
					data: {
						pageNum: 1,
						pageSize: 10,
						// microShopId: 'c0a8007c-6e48-18b9-816e-48d04d870053',
						microShopId: this.microShopId,
						// id: "7933c407-85eb-11ea-8a6e-00163e0a0905"
						id: id
					},
					method: 'GET',
					dataType: 'json',
					header: {
						'content-type': 'application/json ' //自定义请求头信息
					},
					success: res => {
						console.log(res.data.data);
						this.productList = res.data.data.list;
					}
				});
			},
			// tab切换
			showType(tbIndex, id) {
				this.tabbarIndex = tbIndex;
				let ele = 'ele' + tbIndex;
				this.getRect('#' + ele);
				// this.list = this.orderList[tbIndex];
				console.log(tbIndex);
				console.log(id);
				this.getListByCategory(id);
			},
			getRect(ele) {
				//获取点击元素的信息,ele为传入的id
				var that = this;
				uni
					.createSelectorQuery()
					.select(ele)
					.boundingClientRect(function(rect) {
						let moveParams = that.moveParams;
						moveParams.subLeft = rect.left;
						moveParams.subHalfWidth = rect.width / 2;
						that.moveTo();
					})
					.exec();
			},
			// 中文tabbar
			setZH() {
				uni.setTabBarItem({
					index: 0,
					text: '首页'
				});
				uni.setTabBarItem({
					index: 1,
					text: '分类'
				});
				uni.setTabBarItem({
					index: 2,
					text: '购物车'
				});
				uni.setTabBarItem({
					index: 3,
					text: '我的'
				});
			},
			//英文tabbar
			setEN() {
				uni.setTabBarItem({
					index: 0,
					text: 'Home'
				});
				uni.setTabBarItem({
					index: 1,
					text: 'Category'
				});
				uni.setTabBarItem({
					index: 2,
					text: 'Cart'
				});
				uni.setTabBarItem({
					index: 3,
					text: 'Mine'
				});
			},
			//波兰语tabbar
			setPL() {
				uni.setTabBarItem({
					index: 0,
					text: 'Dom'
				});
				uni.setTabBarItem({
					index: 1,
					text: 'kategoria'
				});
				uni.setTabBarItem({
					index: 2,
					text: 'wózek'
				});
				uni.setTabBarItem({
					index: 3,
					text: 'mój'
				});
			},
			//俄语tabbar
			setRU() {
				uni.setTabBarItem({
					index: 0,
					text: 'Домой'
				});
				uni.setTabBarItem({
					index: 1,
					text: 'категория'
				});
				uni.setTabBarItem({
					index: 2,
					text: 'Корзина'
				});
				uni.setTabBarItem({
					index: 3,
					text: 'мой'
				});
			},
			//捷克语tabbar
			setCZ() {
				uni.setTabBarItem({
					index: 0,
					text: 'Domov'
				});
				uni.setTabBarItem({
					index: 1,
					text: 'kategorie'
				});
				uni.setTabBarItem({
					index: 2,
					text: 'Nákupní košík'
				});
				uni.setTabBarItem({
					index: 3,
					text: 'můj'
				});
			},
			//罗马尼亚语tabbar
			setRO() {
				uni.setTabBarItem({
					index: 0,
					text: 'pagina principala'
				});
				uni.setTabBarItem({
					index: 1,
					text: 'categorie'
				});
				uni.setTabBarItem({
					index: 2,
					text: 'Cărucior de cumpărături'
				});
				uni.setTabBarItem({
					index: 3,
					text: 'Ale mele'
				});
			},
			//西班牙语tabbar
			setES() {
				uni.setTabBarItem({
					index: 0,
					text: 'Página de inicio'
				});
				uni.setTabBarItem({
					index: 1,
					text: 'categoría'
				});
				uni.setTabBarItem({
					index: 2,
					text: 'Carrito de compras'
				});
				uni.setTabBarItem({
					index: 3,
					text: 'mi'
				});
			},
			//匈牙利语tabbar
			setHU() {
				uni.setTabBarItem({
					index: 0,
					text: 'Főoldal'
				});
				uni.setTabBarItem({
					index: 1,
					text: 'kategória'
				});
				uni.setTabBarItem({
					index: 2,
					text: 'Bevásárlókocsi'
				});
				uni.setTabBarItem({
					index: 3,
					text: 'az én'
				});
			},
			//越南语tabbar
			setVN() {
				uni.setTabBarItem({
					index: 0,
					text: 'Trang chủ'
				});
				uni.setTabBarItem({
					index: 1,
					text: 'thể loại'
				});
				uni.setTabBarItem({
					index: 2,
					text: 'Giỏ hàng'
				});
				uni.setTabBarItem({
					index: 3,
					text: 'của tôi'
				});
			},


			languageChange: function(e) {
				let pindex = e.target.value;
				console.log(pindex)
				this.languageIndex=pindex;
				//对应date中的languageArray
				if (pindex == 0) {
					// alert('中文')
					this.$i18n.locale = 'zh-CN';
					this.setZH();
				} else if (pindex == 1) {
					// alert('英文')
					this.$i18n.locale = 'en-US';
					this.setEN();
				} else if (pindex == 2) {
					this.$i18n.locale = 'bl-PL';
					// alert("波兰语")
					this.setPL();
				} else if (pindex == 3) {
					this.$i18n.locale = 'els-RU';
					// alert("俄语")
					this.setRU();
				} else if (pindex == 4) {
					this.$i18n.locale = 'jk-CZ';
					this.setCZ();
					// alert("捷克语")
				} else if (pindex == 5) {
					this.$i18n.locale = 'lm-RO';
					this.setRO();
					// alert("罗马尼亚语")
				} else if (pindex == 6) {
					this.$i18n.locale = 'xb-ES';
					this.setES();
					// alert("西班牙语")
				} else if (pindex == 7) {
					this.$i18n.locale = 'xy-HU';
					this.setHU();
					// alert("匈牙利语")
				} else if (pindex == 8) {
					this.$i18n.locale = 'yn-VN';
					this.setVN();
					// alert("越南语")
				}
			},

			//搜索跳转
			toSearch() {
				uni.navigateTo({
					url: '/pages/search/search'
				});
			},
			//轮播图跳转
			toSwiper(e) {
				uni.showToast({
					title: e.src,
					icon: 'none'
				});
			},
			//商品跳转
			toGoods(e) {
				uni.showToast({
					title: '商品' + e.goods_id,
					icon: 'none'
				});
				uni.navigateTo({
					url: '../../goods/goods'
				});
			},
			//轮播图指示器
			swiperChange(event) {
				this.currentSwiper = event.detail.current;
			},
			getTabHeight() {
				var that = this;
				uni
					.createSelectorQuery()
					.select('.topTabBar')
					.boundingClientRect(function(e) {
						that.tabHeight = e.top;
					})
					.exec();
			},
			getScreenWidth() {
				var that = this;
				uni.getSystemInfo({
					success(res) {
						let moveParams = that.moveParams;
						moveParams.screenHalfWidth = res.screenWidth / 2;
					}
				});
			},
			getRect(ele) {
				//获取点击元素的信息,ele为传入的id
				var that = this;
				uni
					.createSelectorQuery()
					.select(ele)
					.boundingClientRect(function(rect) {
						let moveParams = that.moveParams;
						moveParams.subLeft = rect.left;
						moveParams.subHalfWidth = rect.width / 2;
						that.moveTo();
					})
					.exec();
			},
			scrollMove(e) {
				let moveParams = this.moveParams;
				moveParams.scrollLeft = e.detail.scrollLeft;
				this.moveParams = moveParams;
			},
			moveTo() {
				let subLeft = this.moveParams.subLeft;
				let screenHalfWidth = this.moveParams.screenHalfWidth;
				let subHalfWidth = this.moveParams.subHalfWidth;
				let scrollLeft = this.moveParams.scrollLeft;
				let distance = subLeft - screenHalfWidth + subHalfWidth;
				scrollLeft = scrollLeft + distance;
				this.scrollLeft = scrollLeft;
			},

			// 倒计时结束
			seckillUpdata() {
				// 请求数据
				this.countdown.hour = 6;
				this.countdown.minute = 6;
				this.countdown.second = 6;
			},
			// 跳转每日上新
			navToUpDate() {
				uni.navigateTo({
					url: `/pages/activity/update?name=每日上新`
				});
			},
			// 跳转热卖
			navToRank() {
				uni.navigateTo({
					url: `/pages/activity/rank?name=热卖`
				});
			},

			navToDetailPage(id) {
				//测试数据没有写id，用title代替

				// let id = item.title;
				console.log(id);
				uni.navigateTo({
					url: `/pages/goods/goods?id=${id}`
				});
			},
			navToseckillPage(item) {
				let id = item.title;
				uni.navigateTo({
					url: `/pages/activity/update?name=限时抢购`
				});
			}
		}
	}; 
</script>
<style lang="scss">
	page {
		position: relative;
		background-color: #fff;
	}

	@font-face {
		font-family: 'HMfont-home';
		src: url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2');
	}

	.pullDown-effects {
		position: fixed;
		//top: calc(100upx - 36vw);
		top: 0;
		z-index: 9;
		width: 100%;
		height: 36vw;
		/*  #ifdef  APP-PLUS  */
		padding-top: var(--status-bar-height);

		/*  #endif  */
		image {
			width: 100%;
			height: 36vw;
		}
	}

	.status {
		width: 100%;
		height: 0;
		position: fixed;
		z-index: 10;
		background-color: #fff;
		top: 0;
		/*  #ifdef  APP-PLUS  */
		height: var(--status-bar-height); //覆盖样式
		/*  #endif  */
	}

	.header {
		width: 92%;
		padding: 0 4%;
		height: 100upx;
		display: flex;
		align-items: center;
		position: fixed;
		top: 0;
		z-index: 10;
		background-color: #fff;

		/*  #ifdef  APP-PLUS  */
		top: var(--status-bar-height);
		/*  #endif  */

		.addr {
			width: 120upx;
			height: 60upx;
			flex-shrink: 0;
			display: flex;
			align-items: center;
			font-size: 28upx;

			.icon {
				height: 60upx;
				margin-right: 5upx;
				display: flex;
				align-items: center;
				font-size: 42upx;
				color: #ffc50a;
			}
		}

		.input-box {
			width: 100%;
			height: 60upx;
			background-color: #f5f5f5;
			border-radius: 30upx;
			position: relative;
			display: flex;
			align-items: center;

			.icon {
				display: flex;
				align-items: center;
				position: absolute;
				top: 0;
				right: 0;
				width: 60upx;
				height: 60upx;
				font-size: 34upx;
				color: #c0c0c0;
			}

			input {
				padding-left: 28upx;
				height: 28upx;
				font-size: 28upx;
			}
		}

		.languageBtn {
			// width: 160rpx;
			flex-shrink: 0;
			height: 50rpx;
			margin-left: 20rpx;
			padding-left: 20rpx;
			border-radius: 40rpx;
			font-size: 24rpx;
			// border: 1px solid #007aff;
			color: #666;
			display: flex;
			align-items: center;
			justify-content: center;

			view {
				flex-shrink: 0;
			}

			.icons {
				margin-top: 5rpx;
				margin-left: 10rpx;
			}
		}

		.icon-btn {
			width: 60upx;
			height: 60upx;
			flex-shrink: 0;
			display: flex;

			.icon {
				width: 60upx;
				height: 60upx;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				font-size: 42upx;
			}
		}
	}

	.place {
		background-color: #ffffff;
		height: 100upx;
		/*  #ifdef  APP-PLUS  */
		margin-top: var(--status-bar-height);
		/*  #endif  */
	}

	.swiper {
		width: 100%;
		margin-top: 10upx;
		display: flex;
		justify-content: center;

		.swiper-box {
			width: 100%;
			height: 35vw;

			// overflow: hidden;
			// border-radius: 15upx;
			// box-shadow: 0upx 8upx 25upx rgba(0, 0, 0, 0.2);
			// //兼容ios，微信小程序
			position: relative;
			z-index: 1;

			swiper {
				width: 100%;
				height: 35vw;

				swiper-item {
					width: 100%;
					height: 100%;
					padding: 0 28upx;
					box-sizing: border-box;
					overflow: hidden;

					image {
						width: 100%;
						height: 35vw;
						border-radius: 10upx;
					}
				}
			}

			.indicator {
				position: absolute;
				bottom: 20upx;
				left: 50%;
				transform: translateX(-50%);
				background-color: rgba(255, 255, 255, 0.4);
				width: 150upx;
				height: 5upx;
				border-radius: 3upx;
				overflow: hidden;
				display: flex;

				.dots {
					width: 0upx;
					background-color: rgba(255, 255, 255, 1);
					transition: all 0.3s ease-out;

					&.on {
						width: (100%/3);
					}
				}
			}
		}
	}

	.banner {
		width: 92%;
		margin: 40upx 4%;

		image {
			width: 100%;
			height: 20vw;
			border-radius: 10vw;
			box-shadow: 0upx 5upx 25upx rgba(0, 0, 0, 0.3);
		}
	}

	/* 秒杀专区 */
	.seckill-section {
		padding: 4upx 30upx 24upx;
		background: #fff;

		.s-header {
			display: flex;
			align-items: center;
			height: 92upx;
			line-height: 1;

			.sort {
				min-width: 100upx;
				font-size: 34upx;
				font-weight: bold;
			}

			.more {
				font-size: 24upx;
				color: #666;
				margin-left: auto;
				display: flex;
			}

			.tip {
				font-size: 24upx;
				color: 000;
				margin: 0 20upx 0 40upx;
			}
		}

		.floor-list {
			white-space: nowrap;
		}

		.scoll-wrapper {
			display: flex;
			align-items: flex-start;
		}

		.floor-item {
			width: 200upx;
			margin-right: 20upx;
			font-size: 28upx;
			color: #000000;
			line-height: 1.8;

			image {
				width: 200upx;
				height: 200upx;
				border-radius: 6upx;
			}

			.clamp {
				overflow: hidden;

				.title {
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
					white-space: initial;
					line-height: 1.3;
					height: 70upx;
				}
			}

			.price {
				color: #ed0013;
				font-size: 30upx;

				.oldPrice {
					margin-left: 20upx;
					color: #666;
					font-size: 24upx;
					text-decoration: line-through;
				}
			}
		}
	}

	.goods-list {
		// background-color: #f4f4f4;
		margin-top: 20upx;

		.topTabBar {
			width: 95%;
			margin: 0upx auto;
			background-color: #fff;
			height: 100upx;
			display: flex;
			overflow: auto;

			&.fixed {
				position: fixed;
				top: 100upx;
				z-index: 10;
				width: 100%;
			}

			.innerBox {
				display: flex;

				.grid {
					flex: 1;
					min-width: 20%;
					height: 90upx;
					font-size: 28upx;
					text-align: center;
					flex-shrink: 0;
					transition: all 0.2s ease;

					.text {
						height: 50upx;
						line-height: 50upx;
					}

					.cont {
						color: #444;
						font-size: 24upx;
					}

					&.on {
						font-size: 36upx;
						color: #e91a28;
						border-bottom: solid 4upx #e91a28;
					}
				}
			}
		}

		.loading-text {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 60upx;
			color: #979797;
			font-size: 24upx;
		}

		.product-list {
			margin-top: 20upx;
			width: 92%;
			padding: 0 4% 3vw 4%;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.product {
				width: 48%;
				border-radius: 20upx;
				background-color: #fff;
				margin: 0 0 15upx 0;
				box-shadow: 0upx 5upx 25upx rgba(0, 0, 0, 0.1);

				.imgBox {
					position: relative;

					image {
						width: 100%;
						border-radius: 20upx 20upx 0 0;
					}

					.tagBox {
						position: absolute;
						left: 2upx;
						bottom: 10upx;
						width: 100%;

						.tags {
							padding: 2upx 10upx;
							font-size: 24upx;
							margin-right: 10upx;
							border-radius: 5upx;
							color: #fff;
							display: inline-block;

							&.red {
								background-color: #d85f61;
							}

							&.yellow {
								background-color: #ffcc4a;
							}

							&.green {
								background-color: #6fd85f;
							}
						}
					}
				}

				.name {
					width: 92%;
					padding: 10upx 4%;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					text-align: justify;
					overflow: hidden;
					font-size: 30upx;
				}

				.info {
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					width: 92%;
					padding: 10upx 4% 10upx 4%;

					.price {
						color: #e65339;
						font-size: 30upx;
						font-weight: 600;
					}

					.slogan {
						color: #807c87;
						font-size: 24upx;
					}
				}
			}
		}
	}
</style>
